<template>
	<!-- 完善信息 -->
	<view class="complete">
		<!-- 我的资料 上传资料-->
		<view class="complete_avatar">
			<image :src="form.avatar" mode="aspectFill"></image>
			<view class="complete_avatar_title" @click="up_cart">
				上传头像
			</view>
		</view>
		<!-- 昵称 -->
		<view class="complete_content">
			<view class="complete_content_title">
				昵称
			</view>
			<view class="complete_content_input">
				<input type="text" value="" v-model="form.nickname" maxlength="8" placeholder="请输入昵称（最多8个字）"
					placeholder-style="color:#CCCCCC" />
			</view>
			<view class="complete_content_title" style="margin-top: 20rpx;">
				基本信息
			</view>
			<view class="complete_content_two">
				<!-- 姓名 -->
				<view class="content_two_sex">
					<view class="content_two_sexone">
						性别
					</view>
					<view class="content_two_sex_right">
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="content_two_sex_right2">
								<view class="uni-input">{{form.gender==0?'女':'男'}}</view>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</picker>
					</view>
				</view>
				<!-- 生日 -->
				<view class="content_two_sex">
					<view class="content_two_sexone">
						生日
					</view>
					<view class="content_two_sex_right">
						<!-- <picker mode="date" :value="date" @change="bindDateChange"> -->
						<gpp-date-picker @onCancel="onCancel" @onConfirm="onConfirm" >
							<view class="content_two_sex_right2">
								<view class="uni-input">{{form.birthday||'请选择'}}</view>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</gpp-date-picker>

						<!-- </picker> -->
					</view>
				</view>
				<!-- 身高 -->
				<view class="content_two_sex">
					<view class="content_two_sexone">
						身高
					</view>
					<view class="content_two_sex_right">
						<view class="content_two_sex_right2">
							<view class="uni-input">
								<input style="text-align: right;font-size: 28rpx;" v-model="form.height" type="text"
									value="" placeholder="请输入身高" placeholder-style="color:#333333" />
							</view>
							<!-- <u-icon name="arrow-right"></u-icon> -->
						</view>
					</view>
				</view>
				<!-- 体重 -->
				<view class="content_two_sex">
					<view class="content_two_sexone">
						体重
					</view>
					<view class="content_two_sex_right">
						<view class="content_two_sex_right2">
							<view class="uni-input">
								<input style="text-align: right;font-size: 28rpx;" v-model="form.weight" type="text"
									value="" placeholder="请输入体重" placeholder-style="color:#333333" />
							</view>
							<!-- <u-icon name="arrow-right"></u-icon> -->
						</view>
					</view>
				</view>
				<!-- 职业 -->
				<view class="content_two_sex">
					<view class="content_two_sexone">
						职业
					</view>
					<view class="content_two_sex_right">
						<picker @change="bindPickerChangeWord" :range="arrayWord">
							<view class="content_two_sex_right2">
								<view class="uni-input">{{xianZhiWei||'请选择'}}</view>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</picker>
					</view>
				</view>
				<!-- 星座 -->
				<view class="content_two_sex">
					<view class="content_two_sexone">
						星座
					</view>
					<view class="content_two_sex_right">
						<picker @change="bindPickerXingzuo" :value="xingzuoIndex" :range="xingzuoArray">
							<view class="content_two_sex_right2">
								<view class="uni-input">{{form.constellation||'请选择'}}</view>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</picker>
					</view>
				</view>
				<!-- 现居城市 -->
				<view class="content_two_sex">
					<view class="content_two_sexone">
						现居城市
					</view>
					<view class="content_two_sex_right">
						<pickerAddress @change="change">
							<view class="content_two_sex_right2">
								<view class="uni-input">{{form.address||'请选择'}}</view>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</pickerAddress>
					</view>
				</view>
				<!-- 兴趣爱好 -->
				<view class="content_two_sex">
					<view class="content_two_sexone">
						兴趣爱好
					</view>
					<view class="content_two_sex_right">
						<picker @change="bindPickerChangeHao" :range="arrayAiHao">
							<view class="content_two_sex_right2">
								<view class="uni-input">{{xianAiHao||'请选择'}}</view>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</picker>
					</view>
				</view>
			</view>
			<view class="complete_content_title" style="margin-top: 20rpx;">
				签名
			</view>
			<view class="complete_content_input">
				<input type="text" value="" v-model="form.bio" maxlength="20" placeholder="请用一句话，介绍下自己"
					placeholder-style="color:#CCCCCC" />
			</view>
			<!-- 完成 -->
			<view class="complete_comfirm" @click="completeConfirm">
				完成
			</view>
		</view>
	</view>
</template>

<script>
	import pickerAddress from '@/components/pickerAddress.vue'
	import gppDatePicker from "@/components/gpp-datePicker/gpp-datePicker.vue"
	import {
		getUserInfo,
		getWorkList,
		getHobbyList,
		updateUserInfo
	} from "@/common/config/request.js"
	import {
		baseURL
	} from '../../common/config/config.js';
	export default {
		components: {
			pickerAddress,
			gppDatePicker
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				array: ['女', '男'],
				arrayWord: [], //职位列表
				arrayWordid: [], //职位列表
				arrayAiHao: [], //职位列表
				arrayAiHaoid: [],
				xingzuoArray: ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座'],
				xingzuoIndex: 0, //星座索引
				index: 0,
				date: currentDate,
				xianZhiWei: '',
				xianAiHao: "", //爱好
				form: {
					avatar: "", //头像
					gender: "", //0=女，1=男
					birthday: "", //生日
					height: "", //身高
					weight: "", //体重
					work: "", //职位Id
					constellation: "", //星座
					address: "", //地址
					hobby: "", //爱好
					bio: "", //签名
				},
				type: ''
			}
		},
		onLoad(e) {
			this.type = e.type ? e.type : ''
			this.getInfo()
		},
		methods: {
			// 完成
			completeConfirm() {
				// 完成
				console.log(this.form, '666666')
				let data = this.form
				updateUserInfo(data).then(res => {
					if (res.data.code == 1) {
						uni.showToast({
							icon: 'none',
							title: '修改成功'
						})
						// type==1 新用户首次进入 设置资料
						if (this.type == '1') {
							uni.reLaunch({
								url: '/pages/index/index'
							})
						} else {
							setTimeout(() => {
								uni.navigateBack({

								})
							}, 1500)
						}

					}
				})
			},
			// 上传头像
			up_cart() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: baseURL + '/api/Upload/index',
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								Authorization: 'Bearer' + ' ' + uni.getStorageSync('token')
							},
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								this.form.avatar = JSON.parse(uploadFileRes
									.data).data

								console.log(JSON.parse(uploadFileRes.data).data);
							}
						});
					}
				});
			},
			getInfo() {
				// 用户详情
				getUserInfo({}).then(res => {
					if (res.data.code == 1) {
						let userInfo = res.data.data
						console.log(userInfo, '6666')
						this.form = userInfo
						// this.xianZhiWei
						// this.form.avatar = userInfo.avatar
						// this.form.nickname = userInfo.nickname
						// this.form.address = userInfo.address
						// this.form.height = userInfo.height
						// this.form.weight = userInfo.weight
						// this.form.work = userInfo.work
						// this.form.constellation = userInfo.constellation
						// this.form.gender = userInfo.gender
						// this.form.hobby=userInfo.hobby
						// this.form.bio = userInfo.bio
						this.getWorkLists()
						this.getAihao()
					}
				})
			},
			// 获取职位列表
			getWorkLists() {
				this.arrayWord = []
				getWorkList({}).then(res => {
					// console.log(res, '职位列表破')
					if (res.data.code == 1) {
						res.data.data.forEach(item => {
							this.arrayWord.push(item.name)
							this.arrayWordid.push(item.id)
							if (this.form.work == item.id) {
								this.xianZhiWei = item.name
								this.form.work = item.id
							}
							if (this.xianZhiWei == item.name) {
								this.form.work = item.id
							}
						})
					}
				})
			},
			// 选择职位列表
			bindPickerChangeWord(e) {
				console.log(e, this.arrayWord[e.target.value])
				this.xianZhiWei = this.arrayWord[e.target.value]
				this.form.work = this.arrayWordid[e.target.value]
				// this.getWorkLists()
			},
			//获取爱好列表
			getAihao() {
				getHobbyList({}).then(res => {
					// console.log(res, '职位列表破')
					if (res.data.code == 1) {
						res.data.data.forEach(item => {
							this.arrayAiHao.push(item.name)
							this.arrayAiHaoid.push(item.id)
							if (this.form.hobby == item.id) {
								this.xianAiHao = item.name
								this.form.hobby = item.id
							}
							if (this.xianAiHao == item.name) {
								this.form.hobby = item.id
							}
						})
					}
				})
			},
			// 选择爱好列表
			bindPickerChangeHao(e) {
				this.xianAiHao = this.arrayAiHao[e.target.value]
				this.form.hobby = this.arrayAiHaoid[e.target.value]
				// this.getAihao()
			},
			// 选择性别
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.form.gender = e.target.value
			},
			// 选择生日
			onCancel(e) {
				console.log(e);
			},
			onConfirm(e) {
				this.form.birthday = e.dateValue;
			},
			//星座
			bindPickerXingzuo(e) {
				// console.log('picker发送选择改变，携带值为', e.target.value)
				this.form.constellation = this.xingzuoArray[e.target.value]
				console.log(this.form.constellation)
			},
			// 选择地址
			change(data) {
				console.log(data)
				this.form.address = data.data[1]
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>
<style lang="scss" scoped>
	.complete {
		width: 750rpx;
		min-height: 100vh;
		background-color: #F3F4F5;
		box-sizing: border-box;
		padding-top: 20rpx;
		padding-bottom: 100rpx;

		.complete_avatar {
			width: 178rpx;
			margin: 0 auto;

			image {
				width: 172rpx;
				height: 172rpx;
				border-radius: 50%;
			}

			.complete_avatar_title {
				width: 178rpx;
				height: 62rpx;
				line-height: 62rpx;
				text-align: center;
				background: rgba(0, 0, 0, 0.22);
				border-radius: 31rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				margin-top: 10rpx;
			}
		}

		// 昵称
		.complete_content {
			width: 750rpx;
			box-sizing: border-box;
			padding: 0 20rpx;

			.complete_content_title {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				height: 42rpx;
				color: #999999;
			}

			.complete_content_input {
				width: 710rpx;
				height: 102rpx;
				background: #FFFFFF;
				opacity: 1;
				border-radius: 20rpx;
				margin-top: 16rpx;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				padding: 0 20rpx;

				input {
					display: inline-block;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
				}
			}

			.complete_content_two {
				width: 710rpx;
				background-color: #FFFFFF;

				.content_two_sex {
					width: 100%;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.content_two_sexone {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;
						margin-left: 30rpx;
					}

					.content_two_sex_right2 {
						display: flex;
						margin-right: 20rpx;
					}
				}
			}
		}

		// 完成
		.complete_comfirm {
			width: 702rpx;
			height: 98rpx;
			line-height: 98rpx;
			text-align: center;
			background-color: #FA9700;
			border-radius: 48rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			margin: 40rpx auto 0;
		}
	}
</style>
